<template>
  <div class="parent-component">
    <h3>文件上传演示</h3>

    <!-- 文件上传组件 -->
    <file-uploader
      ref="fileUploader"
      :action="uploadAction"
      :auto-upload="true"
      :limit="3"
      :max-size="5"
      :file-list="uploadedFiles"
      @success="handleUploadSuccess"
      @error="handleUploadError"
      @remove="handleFileRemove"
      @deleteFile="deleteFileFromServer"
      @update:fileList="updateUploadedFiles"
    ></file-uploader>

    <!-- 已上传文件列表 -->
    <div v-if="uploadedFiles.length > 0" class="uploaded-files">
      <h4>已上传文件:</h4>
      <ul>
        <li v-for="(file, index) in uploadedFiles" :key="index">
          {{ file.response.originalFilename }} -
          <span class="file-size">{{ formatFileSize(file.response.size) }}</span> -
          <el-button type="text" size="small" @click="removeFile(file)">删除</el-button>
        </li>
      </ul>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="submitFiles">提交所有文件</el-button>
      <el-button @click="clearAllFiles">清空所有文件</el-button>
    </div>
  </div>
</template>

<script>
// 使用相对路径引用
import FileUploader from  '../ceshi/FileUploader.vue'

export default {
  name: 'ParentComponent',
  components: {
    FileUploader
  },
  data() {
    return {
      uploadAction: '/file/minio/upload', // 适配RuoYi-Vue接口
      uploadedFiles: []
    }
  },
  methods: {
    // 处理上传成功
    handleUploadSuccess(file) {
      this.$message.success(`文件 ${file.response.originalFilename} 上传成功`);
      console.log('上传成功文件信息:', file);
    },
    // 处理上传错误
    handleUploadError(file, error) {
      this.$message.error(`文件 ${file.name} 上传失败`);
      console.error('上传错误:', error);
    },
    // 处理文件移除
    handleFileRemove(file) {
      this.$message.info(`文件 ${file.name} 已移除`);
    },
    // 从服务器删除文件
    deleteFileFromServer(fileId) {
      // 调用RuoYi-Vue删除文件接口
      this.$axios.delete(`/file/minio/delete/${fileId}`)
        .then(response => {
          if (response.code === 200) {
            this.$message.success('文件已从服务器删除');
          } else {
            this.$message.error(response.msg || '删除文件失败');
          }
        })
        .catch(error => {
          this.$message.error('删除文件失败');
          console.error('删除文件错误:', error);
        });
    },
    // 更新已上传文件列表
    updateUploadedFiles(files) {
      this.uploadedFiles = files;
    },
    // 提交所有文件
    submitFiles() {
      if (this.uploadedFiles.length === 0) {
        this.$message.warning('没有可提交的文件');
        return;
      }

      // 提取文件ID列表
      const fileIds = this.uploadedFiles.map(file => file.response.fileId);

      // 提交文件ID列表到服务器
      this.$axios.post('/api/submit-files', { fileIds })
        .then(response => {
          if (response.code === 200) {
            this.$message.success('文件提交成功');
            console.log('文件提交成功:', response.data);
          } else {
            this.$message.error(response.msg || '文件提交失败');
          }
        })
        .catch(error => {
          this.$message.error('文件提交失败');
          console.error('文件提交错误:', error);
        });
    },
    // 清空所有文件
    clearAllFiles() {
      this.$confirm('确定要清空所有上传的文件吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.$refs.fileUploader.clearFiles();
        this.uploadedFiles = [];
        this.$message.success('已清空所有文件');
      }).catch(() => {
        this.$message.info('已取消清空');
      });
    },
    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes < 1024) return bytes + 'B';
      else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + 'KB';
      else return (bytes / 1048576).toFixed(2) + 'MB';
    }
  }
}
</script>

<style scoped>
.parent-component {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.uploaded-files {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

li:last-child {
  border-bottom: none;
}

.file-size {
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
}

.action-buttons {
  margin-top: 20px;
}
</style>
